<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
    <link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
    <script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
    <title>simpleSearch</title>

    <style>
        body{
            font-size: 12px;
            font-family: Arial;
        }
        a{
            color: #999;
        }
        a:hover{
            text-decoration: none;
            color: #C40000;
        }
        div.simpleSearchDiv{
            background-color: #C40000;
            width: 300px;
            margin: 10px 20px 40px;
            padding: 1px;
            height: 40px;
            display: block;
        }
        div.simpleSeachDiv input{
            width: 225px;
            height: 34px;
            border: 1px solid transparent;
            margin: 2px;
            outline: none;
        }
        div.simpleSeachDiv button{
            width: 60px;
            border: 1px solid transparent;
            background-color: #C40000;
            color: white;
            font-size: 14px;
            /*font-weight: bold;*/
        }
        div.searchBelow{
            margin-top: 3px;
            margin-left: -20px;
        }
        div.searchBelow span{
            color: #999;
        }
        div.searchBelow a{
            padding: 0px 20px 0px 20px;
            font-size: 14px;
        }
        img.simplelogo{
            position: absolute;
            left: 10px;
            top: 50px;
            width: 140px;
        }
    </style>
</head>
<body>
<div>
    <a href="#nowhere">
        <img src="http://how2j.cn/tmall/img/site/simpleLogo.png" class="simplelogo" id="simplelogo" />
    </a>
    <div class="simpleSearchDiv pull-right">
        <input type="text" placeholder="平衡车 原汁机" name="keyword"/>
        <button type="submit" class="searchButton">搜天猫</button>
        <div class="searchBelow">
            <span><a href="#nowhere">冰箱</a><span>|</span></span>
            <span><a href="#nowhere">空调</a><span>|</span></span>
            <span><a href="#nowhere">女表</a><span>|</span></span>
            <span><a href="#nowhere">男表</a></span>
        </div>
    </div>
    <div style="clear: both"></div>
</div>
</body>
</html>